<template>
  <view class="before-result-page-mbti">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" />
    <!-- <view class="fixed-right-tip" @click="backToSclList" v-if="showMoreSclBlock">
      更多测评
      <u-icon color="#7E3508" size="24rpx" name="arrow-right"></u-icon>
    </view> -->

    <template v-for="(img,index) in staticImgs.imgArr">
      <view class="img-wrapper" :class="{'img-wrapper-1':index===0}">
        <image class="img" :src="img" mode="widthFix"></image>
        <view class="box-wrapper-1-pos" v-if="index === 0" >
          <!-- :style="{'top':topH+'rpx'}" -->
          <view class="tit-box">{{sclName}}</view>
          <view class="text-box">
            测试结果
          </view>


          <view class="first-small-btn" @click="confirmHandle" :style="{'background-image':`url(${staticImgs.mainBtnBg})`}">
            <view class="unit">¥</view>
            <view class="price">{{ nowPrice }}</view>
            <view>解锁你的EQ值</view>
            <view
              class="tip-box"
              :style="{'background-image':`url(${staticImgs.tipBg})`}"
              v-if="fixeBtnType === 4"
            >
              {{sclInfo.discount}}折福利
            </view>
          </view>
          
          <view v-if="couponInfo.discount" class="origin-price-box">原价：{{sclInfo.newOriginalPrice}}</view>
          <!-- <view class="dashed-line"></view> -->

        </view>

        <view class="box-wrapper-3-pos" v-else-if="index === 2">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>

        <view class="box-wrapper-4-pos" v-else-if="index === 3">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>

        </view>

<!--        <view class="box-wrapper-5-pos" v-else-if="index === 4">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view> -->


        <view class="box-wrapper-6-pos" v-else-if="index === 5">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


        <view class="box-wrapper-2-pos" v-else-if="index === 1">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        <!-- 
        <view class="box-wrapper-7-pos" v-else-if="index === 6">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        -->
        
        <view class="box-wrapper-8-pos" v-else-if="index === 7">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        
        <view class="box-wrapper-9-pos" v-else-if="index === 8">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


        <view class="box-wrapper-11-pos" v-else-if="index === 10">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>

        <view class="box-wrapper-12-pos" v-else-if="index === 11">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        <view class="box-wrapper-13-pos" v-else-if="index === 12">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>

        <view class="box-wrapper-14-pos" v-else-if="index === 13">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>
        
        <view class="box-wrapper-15-pos" v-else-if="index === 14">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


      </view>
    </template>

    <view class="references-box" v-if="referenceList && referenceList.length">
      <view class="tit">参考文献</view>
      <view class="text-list">
        <view class="text" v-for="(text,index) in referenceList" :key="index">
          [{{index+1}}]{{text}}
        </view>
      </view>
    </view>

    <view class="report-time-box">
      <view>此测评报告仅供参考</view>
      <view>报告时间：{{sclTime}}</view>
    </view>


    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <!-- 解锁专属报告 -->

      <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
        @click="confirmHandle">
        <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{ nowPrice }}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
      </view>

    </view>


    

    <BeforeExitPayModal2 isSpm @close="beforeExitPayClose_2" @confirm="beforeExitPayConfirm_2" :visible="modalVisible" />
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import BeforeExitPayModal from '@/subcontractorD/components/BeforeExitPayModal_1.vue'
  import BeforeExitPayModal2 from '@/subcontractorD/components/BeforeExitPayModal_2.vue'
  import {
    removeEmptyProperty
  } from '@/common/utils/util.js'

  import {
    orderPay
  } from '@/common/api/scl_api.js'
  import {
    debounce
  } from 'lodash'

  var app = getApp();
  export default {
    components: {
      navigationBar,
      BeforeExitPayModal,
      BeforeExitPayModal2
    },
    props: {
      scrollTopNum: {
        type: Number,
        default: 0
      },
      sclId: {
        type: String,
        default: '',
      },
      homeModalType: {
        type: String,
        default: '',
      },
      sclPayBack: {
        type: Boolean,
        default: true
      },
      sclIntro: {
        type: String,
        default: '',
      },
      sclInfo: {
        type: Object,
        default: {},
      },
      couponInfo: {
        type: Object,
        default: {},
      },
      referenceList: {
        type: Array,
        default: []
      },
      sclName:{
        type:String,
        default:'',
      },
    },
    data() {
      return {
        navigationBarDataInfo: {
          "bg_color": "#fff",
          "color": "#333",
          "flag": 1,
          "name": "",
          "hasEntity": true,
        },
        sclTime: this.$dayjs().format("YYYY-MM-DD HH:mm"),
        danmakuContainer: {},
        showMoreSclBlock: false,
        windowHeight: 99999,
        modalVisible: false,
        staticImgs: {
          imgArr: [
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/bg-1.png',
            // this.imgBaseURL + '/scl/ad/SPM/R-12x-v2.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/1@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/2@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/3@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/4@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/5@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/img-6.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/img-7.png',
            
          ],
          arrowRight: this.imgBaseURL + '/scl/ad/MBTI/r-arrow.png',
          tipImg: this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/tip-img-2.png',
          btnImg: this.imgBaseURL + '/scl/ad/MBTI/unlock-btn.png',
          mainBtnBg: this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/main-btn.jpg',

          smallBtnImg: this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/btn-bg.jpg',
          btnBg: this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/btn-bg.jpg',
          questionImg: this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/question-icon.png',
          tipBg: this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/tip-bg.png',
          titImg: this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/tit.png',

          boxActBg: this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/box-act.jpg',
          boxDefBg: this.imgBaseURL + '/scl/scl-before-result-page/love-mbti/box-def.jpg',
          btnBg3: this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/btn-bg-3.png',
        },
        loading: false,
        showFixedBtn: false,
        danmukuData: [],
        hasTriggeredSpecificCondition: false,
        hasBackLock: true,
        reRenderLegend: false,
        legendNum: 0,
        topH: 0,
      }
    },
    computed: {
      fixeBtnType() {
        ///1:默认样式，2：一元带icon，3:一元不带icon，4:其他优惠券
        if (this.sclInfo && this.sclInfo.discountType === 4) {
          return 3
        } else if (this.sclInfo && this.sclInfo.discountUid) {
          return 4
        } else {
          return 1
        }
      },
      nowPrice(){
        return this.sclInfo?.discountPrice || this.sclInfo?.newOriginalPrice
      }
    },
    watch: {
      scrollTopNum(val) {
        this.showFixedBtn = val > this.windowHeight
      },
      sclName:{
        handler(val){
          this.navigationBarDataInfo.name = val
        },
        immediate: true
      }
    },
    mounted() {
      const that = this
      uni.getSystemInfo({
        success(res) {
          // that.windowHeight = res.windowHeight - 50
          that.windowHeight = res.windowHeight / res.devicePixelRatio
        }
      })
    },
    beforeDestroy() {
    },
    methods: {
      backHandle() {
        if (this.hasBackLock) {
          this.hasBackLock = false
          if (this.sclPayBack) {
          } else {
            this.modalVisible = true
          }
        } else {
          if (this.homeModalType == 'love-mbti') {
            uni.setStorageSync('loveMbtiModalVisible', true)
          } else if (this.homeModalType == 'job-mbti') {
            uni.setStorageSync('mbtiModalVisible', true)
          }
          uni.reLaunch({
            url: '/pages/sclList/sclList'
          })
        }
      },
      backToSclList() {
        if (this.homeModalType == 'love-mbti') {
          uni.setStorageSync('loveMbtiModalVisible', true)
        } else if (this.homeModalType == 'job-mbti') {
          uni.setStorageSync('mbtiModalVisible', true)
        }
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      beforeExitPayClose_2() {
        this.modalVisible = false
      },
      beforeExitPayConfirm_2() {
        this.modalVisible = false
        uni.setStorageSync('mbtiModalVisible', true)
        uni.reLaunch({
          url: '/pages/sclList/sclList?userType=sclList'
        })

      },
      payHandle: debounce(async function(isDisPay) {
        if (this.loading) return
        uni.showLoading({
          title: "请求支付中..."
        })

        console.log(isDisPay, '=============isDisPay')

        this.loading = true
        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          orderType: '7',
          isAdditional: 'N',
          discountUid:this.$store.state.user.actCouponId,
          adClickId: uni.getStorageSync('adClickId'),
          isDisPay: (isDisPay == 'Y' || this.hasTriggeredSpecificCondition) ? 'Y' : 'N'
        })

        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res => {

          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
              },
              fail: function(err) {
                that.$showToast('支付取消');
                uni.showLoading()
                that.showMoreSclBlock = true
                if (isDisPay != 'Y' && that.sclPayBack) {

                  that.hasTriggeredSpecificCondition = true

                  setTimeout(() => {
                    that.hasTriggeredSpecificCondition = false
                  }, 60 * 1000)

                } else if (!that.sclPayBack) {
                  that.modalVisible = true
                }

                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
              }
            });
          } else {
            that.$showToast(res.data.message);
            setTimeout(()=>{
              uni.hideLoading()
              that.showPopup = false
              that.loading = false
            },300)
          }
        }).catch(e=>{
          setTimeout(()=>{
            this.showPopup = false
            this.loading = false
          },300)
        })

      }, 500),
      preConfirmHandle() {
        this.payHandle()
      },
      confirmHandle(){
        this.useSubscription(this.preConfirmHandle)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .references-box {
    margin-top: 70rpx;
    display: flex;
    flex-direction: column;
    width: 100%;

    .tit {
      margin-left: 36rpx;
      width: fit-content;
      font-size: 40rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #195199;
      padding-bottom: 6rpx;
      border-bottom: 2rpx solid rgba(25, 81, 153, .3);
    }

    .text-list {
      margin: auto;
      margin-top: 18rpx;
      width: 675rpx;
      // height: 1416rpx;
      border: 1rpx solid #C1C1C1;
      padding: 14rpx 18rpx;

      .text {
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #666666;
        line-height: 46rpx;
        text-indent: 1.5em;
        text-align: justify;
      }
    }
  }

  // .references-box -end
  .report-time-box {
    margin: auto;
    margin-top: 32rpx;
    width: 709rpx;
    border-top: 4rpx solid #666;
    padding-top: 16rpx;
    padding-bottom: 50rpx;
    padding-left: 14rpx;
    padding-right: 14rpx;
    display: flex;
    justify-content: space-between;

    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 300;
    color: #666666;

  }



  .before-result-page-mbti {
    padding-bottom: 10vh;
    background-color: #fff;
    position: relative;

    .fixed-right-tip {
      width: 182rpx;
      height: 50rpx;
      column-gap: 14rpx;

      background: linear-gradient(180deg, #FDE591 0%, #FFCE66 100%);
      border-radius: 32rpx 0rpx 0rpx 32rpx;

      position: fixed;
      right: 0;
      top: 280rpx;
      z-index: 24;

      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20rpx;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #7E3508;
      // line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }


    .img-wrapper-1 {
      height: 800rpx;
    }

    .img-wrapper {
      position: relative;

      .img {
        width: 750rpx;
        // margin-bottom: 10px;
      }




      .small-btn-wrapper {
        width: 400rpx;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

        margin-top: 40rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .before-exit-btn-wrapper {
        width: 380rpx;
        height: 94rpx;
        // background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
        // border-radius: 40rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        position: relative;

        background-size: 100% 100%;
        background-repeat: no-repeat;

        .price-box {
          display: flex;
          align-items: flex-end;
              margin-bottom: 10rpx;


          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 37rpx;

            font-style: normal;
            margin-bottom: 4rpx;
            margin-right: 4rpx;
          }

          .num {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 61rpx;

            font-style: normal;
          }
        }

        .abs-tip-box {
          position: absolute;
          bottom: 62rpx;
          left: 50%;
          transform: translateX(-50%);

          background-repeat: no-repeat;
          background-size: 100%;

          width: 240rpx;
          height: 60rpx;
          box-sizing: border-box;
          text-align: center;
          padding-top: 6rpx;
          background-repeat: no-repeat;
          background-size: 100%;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FF4A4A;
          font-style: normal;
        }

        .btn-text {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          // margin-left: 12rpx;
        }

        margin-top: 40rpx;
      }
      
      
      .box-wrapper-2-pos {
        position: absolute;
        bottom: 160rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-3-pos {
        position: absolute;
      
        top: 274rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-4-pos {
        position: absolute;
        bottom: 47rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-5-pos {
        position: absolute;
        bottom: 190rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-6-pos {
        position: absolute;
        bottom: 1210rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-7-pos {
        position: absolute;
        bottom: 210rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-8-pos {
        position: absolute;
        bottom: 870rpx;
        left: 0;
        right: 0;
      }
      .box-wrapper-9-pos {
        position: absolute;
        bottom: 530rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-11-pos {
        position: absolute;
        bottom: 168rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-12-pos {
        position: absolute;
        bottom: 700rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-13-pos {
        position: absolute;
        bottom: 150rpx;
        left: 0;
        right: 0;
      }
      

      .box-wrapper-14-pos {
        position: absolute;
        bottom: 120rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-15-pos {
        position: absolute;
        bottom: 520rpx;
        left: 0;
        right: 0;
      }
    }

    // .img-wrapper -- end





    .btn-wrapper-pos {
      position: fixed;
      bottom: 7vh;

      left: 0;
      right: 0;

      display: flex;
      justify-content: center;

      .before-exit-btn-wrapper {
        width: 400rpx;
        height: 100rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

        background-repeat: no-repeat;
        background-size: 100% 100%;

        .price-box {
          display: flex;
          align-items: flex-end;

          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 37rpx;

            font-style: normal;
            margin-bottom: 4rpx;
            margin-right: 4rpx;
          }

          .num {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 61rpx;

            font-style: normal;
          }
        }

        .btn-text {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          margin-left: 12rpx;
        }
      }


      .btn-wrapper {
        width: 600rpx;
        height: 90rpx;

        .btn-img {
          width: 100%;
          height: 100%;
        }
      }
    }


    .popup-wrapper {
      width: 750rpx;
      min-height: 502rpx;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      box-sizing: border-box;
      // padding-top: 66rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      


      .pay-btn {
        width: 560rpx;
        height: 94rpx;
        border-radius: 45rpx;

        display: flex;
        justify-content: center;
        margin: auto;
        margin-top: 40rpx;
        align-items: center;

        // padding-top: 68rpx;

        background-repeat: no-repeat;
        background-size: contain;
        box-sizing: border-box;

        .u-icon {
          height: fit-content;
        }

        .text {
          font-family: PingFang-SC, PingFang-SC;

          font-size: 32rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          margin-left: 10rpx;
        }
      }
    }
  }

  .box-wrapper-1-pos {
    
      position: absolute;
      // bottom: 0;
      top: 254rpx;
      left: 0;
      right: 0;
      
      .tit-box{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;
      }
      
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    
    .origin-price-box{
      margin-top: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #EAAA9F;
      line-height: 37rpx;
      text-align: center;
      font-style: normal;
      
      // text-decoration: line-through;
      position: relative;
      
      &::before{
        position: absolute;
        left: -10rpx;
        right: -10rpx;
        content: ' ';
        top: 50%;
        transform: translateY(-50%);
        border-top: 1px solid #EAAA9F;
        
      }
    }

    .first-small-btn {
      margin-top: 246rpx;

      width: 530rpx;
      height: 94rpx;
      box-sizing: border-box;
      position: relative;

      background-repeat: no-repeat;
      background-size: 100% 100%;

      display: flex;
      align-items: center;
      justify-content: center;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;

      font-style: normal;

      .unit {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        margin-top: 9rpx;
        
            margin-top: 4rpx;
            margin-right: 4rpx;
      }

      .price {
        font-size: 40rpx;
        margin-right: 10rpx;
        margin-top: -4rpx;
      }


      .tip-box {
        position: absolute;
        right: 47rpx;
        bottom: 86rpx;
        
        width: 140rpx;
        height: 58rpx;
        
        background-repeat: no-repeat;
        background-size: 100% 100%;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        line-height: 37rpx;
        text-align: center;
        font-style: normal;
        
        box-sizing: border-box;
            padding-top: 4rpx;
      }

    }

    .tit-img-wrapper {
      margin-top: 34rpx;
      width: 580rpx;
      height: 64rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .text-box {
      margin-top: 12rpx;

      position: relative;
      font-family: PingFang-SC, PingFang-SC;
      // font-weight: 500;
      font-size: 30rpx;
      color: #1A1B1F;
      line-height: 42rpx;
      // letter-spacing: 1px;
      text-align: left;
      font-style: normal;

      &::after,
      &::before {
        position: absolute;
        content: ' ';

        border-top: 1px solid #1A1B1F;
        top: 50%;
        transform: translateY(-50%);
        width: 40rpx;
      }

      &::after {
        left: -60rpx;
      }

      &::before {
        right: -60rpx;
      }
    }
  }

  
  .dashed-line {
    margin: auto;
    width: 694rpx;
    height: 1rpx;
    margin-top: 64rpx;
  
    background-image: repeating-linear-gradient(to right,
        #A9C4F2,
        #A9C4F2 10rpx,
        transparent 10rpx,
        transparent 20rpx);
  }
</style>